<template>
  <div>
    <p>{{ msg }}</p>
    <!-- 使用局部组件 -->
    <!-- <Partchild></Partchild> -->
    <!-- 使用全局组件 -->
    <!-- <globalchild :tit="tit" /> -->
    <!-- 绑定自定义指令 -->
    <!-- <p v-red @click="count++">vue2中的自定义指令-{{ count }}</p> -->
    <p v-red @click="flag = !flag" v-if="flag">
      vue2中的自定义指令-{{ count }}
    </p>
  </div>
</template>

<script>
import Partchild from "@/components/Partchild";
export default {
  name: "father",
  data() {
    return {
      msg: "我是父组件",
      tit: "今晚我要吃烧烤",
      count: 100,
      flag: true,
    };
  },
  directives: {
    red: {
      bind(el, binding) {
        console.log(el, "bind");
        el.style.background = "red";
      },
      inserted(el, binding) {
        console.log(el, "inserted");
      },
      update(el, binding) {
        console.log(el, "update");
      },
      componentUpdated(el, binding) {
        console.log(el, "componentUpdated");
      },
      unbind(el, binding) {
        console.log(el, "unbind");
      },
    },
  },
  components: {
    Partchild,
  },
  methods: {},
  computed: {},
  watch: {},
};
</script>
<style scoped>
</style>